/*
 * Description: 基础版 - 将一个dom拖入容器
 * Author: wangyifei
 * DateCreated: 2024-04-12 09:53
 */

import { useState } from 'react';
import { DndContext, type DragEndEvent } from '@dnd-kit/core';
import Draggable from './c-cpns/Draggable';
import Droppable from './c-cpns/Droppable';
import { Card } from 'antd';

const Detail = () => {
	const [isDropped, setIsDropped] = useState(false);
	const draggableMarkup = <Draggable>Drag me</Draggable>;

	function handleGragEnd(event: DragEndEvent) {
		if (event.over && event.over.id === 'droppable') setIsDropped(true);
	}

	return (
		<Card>
			<DndContext onDragEnd={handleGragEnd}>
				{!isDropped ? draggableMarkup : null}
				<Droppable>{isDropped ? draggableMarkup : 'Drop here'}</Droppable>
			</DndContext>
		</Card>
	);
};

export default Detail;
